<template>
    <div class="district-polution-info-container">
        <!-- 常住人口总量 -->
        <div>
            <div class="info-title m-bottom-10">
                <span class="squarePoint"></span>
                常住人口总量
            </div>
            <div class="center m-bottom-10">
                <div class="population font-bold radius-5 padding-5">
                    {{population}}<span>万人</span> 
                </div>
            </div>
        </div>	

        <!-- 常住人口平均年龄和男女占比 -->
        <div>
            <div class="info-title ">
                <span class="squarePoint"></span>
                常住人口画像                
            </div>
            <div class="flex-row m-tb-20 p-left-5 font-bold">
                <div class="population-portrait-data flex-1">
                    <div class="p-bottom-2_5">
                        <img src="../../assets/icon/average.png" class="img-size-10" alt=""> 平均年龄
                    </div>
                    <div class="portrait-data">{{populationPortrait.averageAge}}</div>
                </div>
                <div class="population-portrait-data flex-1">
                    <div class="p-bottom-2_5">
                        <img src="../../assets/icon/gender.png" class="img-size-10" alt=""> 男女占比
                    </div>
                    <div class="portrait-data">{{populationPortrait.sexRatio}}</div>
                </div>
            </div>
        </div>	

        <!-- 常住人口年龄段  -->
        <div>
            <div class="info-title m-bottom-10">
                <span class="squarePoint"></span>
                常住人口年龄段                
            </div>
            <div>
                <AgeGroup/>
            </div>
        </div>	
    </div>
</template>

<script>
    import AgeGroup from '../echarts/AgeGroup.vue'
    import {getPopulationApi,getAverageAgeAndSexRatioApi} from '@/http/Api.js'
    import {handleSetStorage} from '@/http/auth.js'
    import axios from 'axios'
    export default {
        components:{
            AgeGroup
        },
        mounted(){
           this.getPopulation();
           this.getPopulationPortrait()
        },        
        data(){
            return{
                population:"145.7",
                populationPortrait:{
                    averageAge:"37.25",
                    sexRatio:"1:0.98",
                },
                AgeGroup:""
            }
        },
        methods:{
            // 获取人口
           getPopulation(){
            getPopulationApi().then((res)=>{
                // 人口数量处理
                let temp = res.data.toString().split("").reverse()
                if(temp.length>5){
                    temp.splice(4,0,".")
                    let len = 4
                    for (let i = 0; i < len; i++) {
                        if(temp[i]==0){
                            temp.splice(i,1)
                            i--
                            len--
                        }else{
                            temp = temp.reverse().join("")
                        }
                    }
                }else if(temp.length<5){
                    // UN
                }else{
                    // UN
                }

                this.population = temp
            }).catch(err=>console.log(err))
           },
            //获取人口画像    
           getPopulationPortrait(){
            getAverageAgeAndSexRatioApi().then((res)=>{
                this.populationPortrait.averageAge = res.data.age.toString().slice(0,5)
                this.populationPortrait.sexRatio = (res.data.man.toString() / res.data.feman.toString()).toString().slice(0,5)
            }).catch(err=>console.log(err))
           }
        
        }
    }
</script>

<style lang="scss" scoped>
@import '../../assets/css/common.scss';

.district-polution-info-container{
    margin-top:.5rem;
    padding: 10px 10px 10px 16%;
    background:linear-gradient(to left,var(--themeColor0201) 70%,var(--themeColor0202) 90%,var(--themeColor0203));


    .squarePoint{
        @include squarePoint(10px,15px,--themeColor04);
    }

    .info-title{
        color:var(--themeColor02);
        font-weight:bold;
    }

    .population{
        width: fit-content;
        @include theme-shadow;
    }

    .population-portrait-data{
        margin-left: 5px;
        padding-left: 5px;
        border-left: 2px solid #66666690;

        img{
            vertical-align: text-bottom;
        }

        .portrait-data{
            
            padding: 5px;
            background-color: #66666690;
            color: var(--themeColor03);
        }
    }
}
</style>